<template>
  <Row align="middle">
    <Col :span="3">{{ itemMap.title }}</Col>
    <Col :span="12" class="management-form">
      <Row class="management-form-item" align="middle">
        <Col :span="3">
          <span>{{ itemMap.sloganTitle }}</span>
        </Col>
        <Col :span="18">
          <Input type="text" clearable v-model="itemInfo.slogan"></Input>
        </Col>
      </Row>
      <Row class="management-form-item" align="middle">
        <Col :span="3">
          <span>{{ itemMap.videoTitle }}</span>
        </Col>
        <Col :span="18">
          <Input type="text" clearable v-model="itemInfo.videoName"></Input>
        </Col>
      </Row>
      <Row class="management-form-item" align="middle">
        <Col :span="4">
          <file-upload
            :formatList="formatList"
            :multiple="false"
            :maxSize="maxSize"
            :pass="pass"
            @handleBeforeUpload="$emit('handleBeforeUpload',$event,itemKey)"
          ></file-upload>
        </Col>
        <Col :span="16">
          <span class="tips">{{ tips }}</span>
        </Col>
      </Row>
    </Col>
  </Row>
</template>

<script>
import fileUpload from "@/pages/components/fileUpload";
export default {
  components: { fileUpload },
  props: {
    itemKey: {
      default: ''
    },
    itemMap: {
      default: () => {
        return {};
      },
    },
    itemInfo:{
      default: () => {
        return {};
      },
    },
    pass:{
      default: () => {
        return {
          isError:false
        };
      },
    },
  },
  data() {
    return {
      tips: "请上传mp4、webm、ogv、m3u8格式的视频",
      formatList: ["mp4", "webm", "ogv", "m3u8"],
      maxSize: 10240*1024,  //10G
    };
  },
  methods: {
  },
};
</script>
<style scoped lang="scss">
.management-form {
  margin-left: 10px;
  padding: 20px 20px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  .management-form-item {
    margin-bottom: 10px;
    .tips {
      font-size: 12px;
      color: #e72121;
    }
  }
}
</style>
